<template>
  <div class="fifth">
    <section>
      <span class="finish">全部完成！</span>
      <p>请创建一个账户，这样我们就可以把善款捐赠给<span class="org">红十字会</span></p>
      <button @click="goNext">创建</button>
    </section>
    <footer>
      <span>您的隐私</span>
      <p>您的隐私对我们来说十分重要。在全民公益的所有问题的答案都是匿名的。在没有您的许可下，我们不会向任何地方泄露您的信息。</p>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'tutorialFifth',
  methods: {
    goNext () {
      // this.$router.push({
      //   name: 'tutorialSixth'
      // })
      this.$router.push({
        name: 'tutorialSixth'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.fifth {
  overflow: hidden;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    background-color: #eee;
    .finish {
      margin-top: 150px;
      font-size: 48px;
      color: #333;
    }
    .org {
      font-weight: bolder;
    }
    p {
      flex: 1;
      font-size: 38px;
      line-height: 48px;
      padding: 27px 72px;
      text-align: center;
      color: #666;
    }
    button {
      justify-content: flex-end;
      margin-bottom: 37px;
      border-radius: 10px;
      width: 690px;
      height: 90px;
      background-color: #3d68be;
      color: #fff;
      font-size: 32px;
    }
  }
  footer {
    flex: none;
    height: 520px;
    background-color: #084171;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    span {
      color: #fff;
      font-size: 32px;
      margin-bottom: 15px;
    }
    p {
      font-size: 32px;
      line-height: 48px;
      padding: 0 24px;
      text-align: center;
      color: #95afc1;
    }
  }
}
</style>
